<template>
  <div class="search">
    <van-nav-bar title="搜索" left-arrow @click-left="onClickLeft" />
    <div class="loggred" v-if="user">
      <van-search
        v-model.trim="keywords"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch" class="icon-sousuo iconfont"></div>
        </template>
      </van-search>
      <div class="hotSearch">
        <h3>热门搜索</h3>
        <div class="hotSearchList">
          <van-tag
            round
            type="primary"
            v-for="(item, index) in hotList"
            :key="item"
            :text-color="
              index === 0
                ? '#F10'
                : index === 1
                ? '#f30'
                : index === 2
                ? '#f50'
                : index === 3
                ? '#f70'
                : index === 4
                ? '#f90'
                : '#686868'
            "
            @click="toSearch(item)"
            color="#F1F0F5"
          >
            {{ item }}
          </van-tag>
        </div>
      </div>
      <div class="history" v-if="historyList.length">
        <div class="header">
          <h3>历史记录</h3>
          <div class="del">
            <div
              class="iconfont icon-shanchu delIcon"
              v-if="!isDelStatus"
              @click="isDelStatus = true"
            ></div>
            <div class="text" v-else>
              <span @click="remove">全部删除</span>
              <span @click="isDelStatus = false">完成</span>
            </div>
          </div>
        </div>
        <div class="historyList">
          <div
            class="historyListItem"
            v-for="(item, index) in historyList"
            :key="item"
          >
            <span class="ellipsis-1" @click="toSearch(item)">{{ item }}</span>
            <div
              class="del iconfont icon-chacha1"
              v-if="isDelStatus"
              @click="del(index)"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <div class="notLogin" v-else>
      <span class="toLogin">还未登录？<b @click="toLogin">去登录</b></span>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import { getStorage, setStorage, removeStorage } from "@/utils/storage";
import { mapState, mapGetters } from "vuex";
export default {
  name: "search",
  computed: {
    ...mapState(["user"]),
    ...mapGetters(["login"]),
  },
  data() {
    return {
      keywords: "",
      hotList: [
        "鱼",
        "康师傅",
        "吹风机",
        "电风扇",
        "女生小皮鞋",
        "篮球",
        "电视",
        "洗衣机",
        "水壶",
      ],
      isDelStatus: false,
      historyList: [],
    };
  },
  created() {
    // console.log(getStorage("history"));
    this.historyList = getStorage("history") || [];
  },
  methods: {
    //返回上一级路由
    onClickLeft() {
      this.$router.back();
    },
    //点击搜索后执行
    onSearch() {
      if (!this.keywords) {
        Toast({ message: "亲，搜索内容不能为空哦~", duration: 1500 });
        return;
      }
      //存储历史记录
      this.setHistory();

      this.$router.push(`/search/searchres?keywords=${this.keywords}`); //query传参
      //this.$router.push(`/search/searchres/${this.keywords}`); //params传参
    },
    //传入搜索关键字后执行
    toSearch(kwd) {
      if (this.isDelStatus) {
        return;
      }
      this.keywords = kwd;

      this.onSearch();
    },
    //存储历史记录
    setHistory() {
      const { keywords, historyList } = this;
      if (historyList.indexOf(keywords) != -1) {
        historyList.splice(historyList.indexOf(keywords), 1);
      } else {
        if (historyList.length >= 10) {
          historyList.pop();
        }
      }
      // console.log(keywords, historyList);
      historyList.unshift(keywords);
      this.historyList = historyList;

      setStorage("history", historyList);
    },
    //删除全部历史记录
    remove() {
      Dialog.confirm({
        title: "温馨提示",
        message: "您确认删除所有历史记录吗？",
      })
        .then(() => {
          removeStorage("history");
          this.historyList = [];
          this.isDelStatus = false;
        })
        .catch(() => {});
    },
    //删除单个历史记录
    del(index) {
      this.historyList.splice(index, 1);
      setStorage("history", this.historyList);
    },
    //去登录
    toLogin() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  background-color: #fafafa;
  .icon-sousuo {
    font-size: 45px;
  }

  .van-nav-bar {
    background-color: #08dbdb;

    /deep/.van-icon {
      color: #fff;
    }
    /deep/.van-nav-bar__title {
      color: #fff;
    }
  }
  .van-search {
    margin-top: -10px;
  }
  .hotSearch {
    padding: 20px 40px;

    h3 {
      color: #666;
    }
    .hotSearchList {
      .van-tag--round {
        margin-right: 15px;
        margin-top: 10px;
      }
    }
  }
  .history {
    padding: 20px 40px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h3 {
        color: #666;
      }
      .del {
        .text {
          span {
            margin-left: 50px;
            color: #665;
          }
        }
      }
    }
    .historyList {
      margin-top: 5px;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      .historyListItem {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        margin-top: 15px;
        margin-right: 20px;
        max-width: 200px;
        span {
          max-width: 170px;
        }
        .del {
          color: #777777;
          font-size: 18px;
          margin-left: 20px;
        }
      }
    }
  }
  .notLogin {
    .toLogin {
      display: flex;
      justify-content: center;
      margin-top: 50px;
      color: #666;
      font-size: 30px;
      b {
        font-weight: normal;
        color: blue;
        font-size: 30px;
      }
    }
  }
}
</style>
